<script>
	import Header from "@/components/Header.vue"
	import Modal from "@/components/Modal.vue"
	export default {
		components: {
			Header,
			Modal
		},
		data() {
			return {
				modalShow: false,
				modalShow2: false,
				loading:true,
				payType: 0,
				title: "编辑资料",
				info: {me_phone:''},
				sex_arr: ['', '男', '女'],
				imgstr: '',
				me_phone:''
			}
		},
		onLoad(options) {
			var info = uni.getStorageSync('info')
			this.info = info
			if(uni.getStorageSync('wx_phone')){
				this.info.me_phone = uni.getStorageSync('wx_phone')
				this.me_phone = uni.getStorageSync('wx_phone')
			}
		},
		
		methods: {
			getphonenumber (e) {
				var that = this
				that.loading = false
			    uni.request({
					url: getApp().globalData.host + '/api/My/wxSetMyPhone',
					data: {
						code: e.detail.code,
					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						uni.setStorageSync('wx_phone',r.data.data.wx_phone)
						that.info.me_phone = r.data.data.wx_phone
						that.loading = true
					},
				})
			},
			uploadImages(path) {
				var that = this
				uni.uploadFile({
					url: getApp().globalData.host + '/api/Login/uploadImages',
					filePath: path,
					name: 'image',
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: res => {
						var json = JSON.parse(res.data);
						that.imgstr = json.data.image_url
						if (that.info && that.info.me_img) that.info.me_img = that.imgstr
						uni.request({
							url: getApp().globalData.host + '/api/My/updateImgOrNick',
							method: "post",
							header: {
								memberid: uni.getStorageSync('member_id'),
								membertoken: uni.getStorageSync('member_token'),
							},
							data: {
								me_img: that.imgstr
							},
							success: (res) => {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
								const memeberItem = uni.getStorageSync("info")
								memeberItem.me_img = that.imgstr
								memeberItem.me_phone = that.me_phone
								uni.setStorageSync("info", memeberItem)
							}
						})
					}
				})
			},
			avatarChange() {
				var that = this;
				// 选择图片逻辑
				uni.chooseImage({
					count: 1, // 默认9，设置需要选择的图片张数
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// 返回选定照片的本地文件路径列表，数组格式
						that.uploadImages(res.tempFilePaths[0]);
						// 可以在这里调用上传图片的函数，例如this.uploadAvatar(res.tempFilePaths[0])
					}
				});

			},
			phone_submit(){
				
				uni.showToast({
					title:'修改成功'
				})
				this.modalShow2=false
			},
			
			edit(e) {
				var val = e.detail.value
				if (val == 1) {
					this.info.me_sex = 2
				} else {
					this.info.me_sex = 1
				}
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/setMyInfo',
					data: {
						set_type: 1,
						set_values: that.info.me_sex
					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						console.log(r)
						if (r.data.code != 200) {
							uni.showModal({
								content: r.data.msg
							})
						} else {
							uni.showToast({
								title: r.data.msg,
								icon: "none"
							})
							uni.request({
								url: getApp().globalData.host + '/api/My/getMyInfo',
								header: {
									memberid: uni.getStorageSync('member_id'),
									membertoken: uni.getStorageSync('member_token'),
								},
								success: (rr) => {
									uni.setStorageSync('info', rr.data.data)
									setTimeout(function() {
										var info = uni.getStorageSync('info')
										that.info = info
										if((that.info.me_phone==undefined)||(that.info.me_phone=='undefined')){
											that.info.me_phone = that.me_phone||''
										}else{
											if(!that.info.me_phone){
												that.info.me_phone = that.me_phone||''
											}
										}
									}, 3000)
								},
							})
						}
					},
				})
			},
			nicknameSubmit() {
				var that=this;
				if (!this.info.me_nick_name) {
					uni.showToast({
						icon: "none",
						title: "请输入昵称"
					})
					return
				}
				if (this.info.me_nick_name.length > 6) {
					uni.showToast({
						title: '昵称最多输入6字',
						icon: 'none',
						duration: 2000,
						success() {}
					})
					return false;
				}
				uni.request({
					url: getApp().globalData.host + '/api/My/updateImgOrNick',
					method: "post",
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					data: {
						me_nick_name: that.info.me_nick_name
					},
					success: (res) => {
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
						const memeberItem = uni.getStorageSync("info")
						memeberItem.me_nick_name = that.info.me_nick_name
						memeberItem.me_phone = that.me_phone
						
						uni.setStorageSync("info", memeberItem)
						that.modalShow=false;
					}
				})
			},
			edit1(e) {
				var val = e.detail.value
				var that = this
				uni.request({
					url: getApp().globalData.host + '/api/My/setMyInfo',
					data: {
						set_type: 2,
						set_values: val.replace(/-/g, '')
					},
					header: {
						memberid: uni.getStorageSync('member_id'),
						membertoken: uni.getStorageSync('member_token'),
					},
					success: (r) => {
						console.log(r)
						if (r.data.code != 200) {
							uni.showModal({
								content: r.data.msg
							})
						} else {
							uni.showToast({
								title: r.data.msg,
								icon: "none"
							})
							uni.request({
								url: getApp().globalData.host + '/api/My/getMyInfo',
								header: {
									memberid: uni.getStorageSync('member_id'),
									membertoken: uni.getStorageSync('member_token'),
								},
								success: (rr) => {
									var member = rr.data.data
									member.me_phone = that.me_phone
									uni.setStorageSync('info', member)
									setTimeout(function() {
										var info = uni.getStorageSync('info')
										that.info = info
									}, 1500)
								},
							})
						}
					},
				})

			}
		}
	}
</script>
<template>
	<view class="custom-bg">

		<Header :title="title" />

		<Modal v-if="modalShow" :confirmText="'确认修改'" :showCancel="true" @confirm="nicknameSubmit" @cancel="()=>{
			modalShow=false
		}">
			<input type="text" placeholder="请输入昵称" maxlength="6" class="bg-gray-300 h-70 my-30 rounded-50" v-model="info.me_nick_name"
				style="text-align: center;">
		</Modal>
		
		<Modal v-if="modalShow2" :confirmText="'确认授权'" :showCancel="true" @confirm="phone_submit" @cancel="()=>{
			modalShow2=false
		}">
			<view style="position: relative;" >
				<input type="text" v-if="loading==true" placeholder="请输入手机号" maxlength="11" class="bg-gray-300 h-70 my-30 rounded-50" v-model="info.me_phone"
					style="text-align: left;padding-left: 15px;">
					<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" style="width: 100px; z-index: 1111; border-radius: 50px; height: 35px;position: absolute; left: 60%;top: 0%;">
						<view class="wechat_img" style="font-size: 12px;">
							<!-- <image src="@/static/phone.png" mode=""></image> -->
							授权手机号
						</view>
					</button>
			</view>
			
		</Modal>


		<div class="list mt-30 ">
			<div class="flex between p-30 bg-white mb-20">
				<image :src="info.me_img" mode="aspectFill" class="w-140 h-140 rounded-full" style="width: 140rpx;height: 140rpx;"></image>
				<div class="fz24 text-gray-a4" @click="avatarChange">更新头像 <image src="/static/my/right.png"
						mode="widthFix" class="w-20 ml-20">
					</image>
				</div>
			</div>

			<div class="h-90 flex between px-30 bg-white">
				<div class="fz26 text-gray-29">昵称：</div>
				<div style="width: 80%;justify-content: flex-end;" class="fz24 text-gray-a4 flex" @click="modalShow=true">{{info.me_nick_name}}
					<image src="/static/my/right.png" mode="widthFix" class="w-20 ml-20">
					</image>
				</div>
			</div>
			
			<div class="h-90 flex between px-30 bg-white" v-if="loading==true">
				<div class="fz26 text-gray-29">手机号：</div>
				<div style="width: 80%;justify-content: flex-end;" class="fz24 text-gray-a4 flex" @click="modalShow2=true">{{info.me_phone||''}}
					<image src="/static/my/right.png" mode="widthFix" class="w-20 ml-20">
					</image>
				</div>
			</div>
			
			

			<div class="line"></div>
			<div class="h-90 flex between px-30 bg-white">
				<div class="fz26 text-gray-29">性别：</div>
				<!-- 对接口得正常赋值range -->
				<picker style="width: 80%;justify-content: flex-end;" mode="selector" :range="['男','女']" @change="edit">
					<div style="width:100%;justify-content: flex-end;" class="fz24 text-gray-a4 flex">{{sex_arr[info.me_sex]}}
						<image src="/static/my/right.png" mode="widthFix" class="w-20 ml-20">
						</image>
					</div>
				</picker>
			</div>
			<div class="line"></div>
			<div class="h-90 flex between px-30 bg-white">
				<div class="fz26 text-gray-29">年龄</div>
				<picker style="width: 80%;justify-content: flex-end;" mode="date" @change="edit1">
					<div style="width: 100%;justify-content: flex-end;" class="fz24 text-gray-a4 flex">
						{{info.me_age}}
						<image src="/static/my/right.png" mode="widthFix" class="w-20 ml-20">
						</image>
					</div>
				</picker>
			</div>
		</div>


	</view>


</template>



<style>
	.custom-bg {
		min-height: 100%;
	}

	.avatar-group {
		position: relative;
	}

	page {
		height: 100%;
		background-color: #F8F8F8;
	}
</style>